当前位置：网站首页>Canvas game 2048 free map size
Canvas game 2048 free map size
2022-06-13 00:46:00 【KatyLight】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: black;
color: white;
}
</style>
<script>
let numArray = [], line;
let score, gameOver;
let infoSpan, numInput;
var c,ctx;
function init(a) {
score = 0;
line = a;
numArray.length = Math.pow(line, 2);
gameOver = false;
reset();
}
function newMap() {
let k = parseInt(numInput.value);
if (!isNaN(k)) {
if (k < 2) {
alert(" What are you playing ？");
} else {
init(k);
}
} else {
alert(" error ！")
}
}
function reset() {
for (let i = 0; i < numArray.length; i++) {
numArray[i] = undefined;
}
gameOver = false;
scoreRest();
putNum();
show();
}
function scoreCount(a) {
score += a;
infoSpan.innerHTML = score;
}
function scoreRest() {
score = 0;
infoSpan.innerHTML = 0;
}
window.onload = function () {
numInput = document.getElementById("lineInput");
infoSpan = document.getElementById("info").querySelector("span");
c=document.getElementById('c');
ctx=c.getContext('2d');
ctx.lineWidth=3;
ctx.font = '25px " Microsoft YaHei "';
init(4);
}
window.onkeydown = function (e) {
if (gameOver) {
alert(" failed ！ Please do it again ！");
return;
}
switch (e.keyCode) {
case 37:
toLeftKey();
putNum();
show();
break;
case 38:
toUPKey();
putNum();
show();
break;
case 39:
toRightKey();
putNum();
show();
break;
case 40:
toBottomKey();
putNum();
show();
break;
}
}
function show() {
showFormat();
}
function getColorCube(k) {
let c;
switch (k){
case 2:
c= '#00FFFF'
break;
case 4:
c= '#ff0000'
break;
case 6:
c= '#5936ff'
break;
case 8:
c= '#aa00ff'
break;
case 16:
c= '#ff00cc'
break;
case 32:
c= '#004bff'
break;
case 64:
c= '#e6ff00'
break;
case 128:
c= '#5e00ff'
break;
case 256:
c= '#a2ff00'
break;
case 512:
c= '#c800ff'
break;
case 1024:
c= '#ff7300'
break;
case 2048:
c= '#00ffb2'
break;
}
return c;
}
function showFormat() {
ctx.clearRect(0,0,c.width,c.height);
let d;
for (let i = 0; i < line; i++) {
for (let j = 0; j < line; j++) {
d = numArray[i * line + j];
if (d === undefined) {
ctx.fillStyle='#b1e1e855';
ctx.strokeStyle='#b1e1e899';
ctx.beginPath();
ctx.rect(j*70,i*70,70,70);
ctx.stroke();
ctx.fill();
ctx.closePath();
} else {
let k=getColorCube(d);
ctx.fillStyle=k+'55';
ctx.strokeStyle=k+'99';
ctx.beginPath();
ctx.rect(j*70,i*70,70,70);
ctx.stroke();
ctx.fill();
ctx.fillStyle=k;
switch (true){
case d<10:
ctx.fillText(d,j*70+27,i*70+45)
break;
case d<100:
ctx.fillText(d,j*70+20,i*70+45)
break;
case d<1000:
ctx.fillText(d,j*70+12,i*70+45)
break;
default:
ctx.fillText(d,j*70+5,i*70+45)
break;
}
ctx.closePath();
}
}
}
/*let c = "", d;
for (let i = 0; i < line; i++) {
for (let j = 0; j < line; j++) {
d = numArray[i * line + j];
if (d === undefined) {
c = c + "<span></span>" + "";
} else {
c = c + `<span class="${getColorCube(d)}">${d}</span>`
}
}
c += "<br/>";
}
document.getElementById("cube").innerHTML = c;*/
}
function putNum() {
let k = [];
for (let i = 0; i < numArray.length; i++) {
if (numArray[i] === undefined) {
k.push(i);
}
}
let t = rand(k);
if (t) {
if (t.length > 1) {
numArray[t[0]] = 2;
numArray[t[1]] = 2;
} else {
numArray[t[0]] = 2;
}
if (k.length <= 2) {
if (!checkCantMove()) {
gameOver = true;
// Why is the effect displayed after the display , Because there is a big delay in the operation after pressing the key , This is executed first .
alert(" You failed ！");
}
}
} else {
console.log("I can't put anything!");
}
}
function checkCantMove() {
for (let i = 0; i < numArray.length; i++) {
if (numArray[i] === undefined) {
return true;
}
if (i % line - 1 > -1) {
if (numArray[i] === numArray[i - 1]) {
return true;
}
}
if (i % line + 1 < line - 1) {
if (numArray[i] === numArray[i + 1]) {
return true;
}
}
if (i % line - line > -1) {
if (numArray[i] === numArray[i - line]) {
return true;
}
}
if (i % line + line < numArray.length) {
if (numArray[i] === numArray[i + line]) {
return true;
}
}
}
return false;
}
function toUPKey() {
let c = -1;
for (let i = 0; i < line; i++) {
for (let j = 1; j < line; j++) {
if (numArray[i + j * line] !== undefined) {
for (let k = 0; k < j; k++) {
if (numArray[i + (j - k - 1) * line] === undefined) {
c = i + (j - k - 1) * line;
} else {
if (numArray[i + (j - k - 1) * line] === numArray[i + j * line]) {
numArray[i + (j - k - 1) * line] += numArray[i + j * line];
numArray[i + j * line] = undefined;
scoreCount(numArray[i + (j - k - 1) * line]);
c = -1;
break;
} else {
break;
}
}
}
if (c !== -1) {
numArray[c] = numArray[i + j * line];
numArray[i + j * line] = undefined;
c = -1;
}
}
}
}
}
function toBottomKey() {
let c = -1;
for (let i = 0; i < line; i++) {
for (let j = line - 2; j > -1; j--) {
if (numArray[i + j * line] !== undefined) {
for (let k = 1; k < line - j; k++) {
if (numArray[i + (j + k) * line] === undefined) {
c = i + (j + k) * line;
} else {
if (numArray[i + (j + k) * line] === numArray[i + j * line]) {
numArray[i + (j + k) * line] += numArray[i + j * line];
numArray[i + j * line] = undefined;
scoreCount(numArray[i + (j + k) * line]);
c = -1;
break;
} else {
break;
}
}
}
if (c !== -1) {
numArray[c] = numArray[i + j * line];
numArray[i + j * line] = undefined;
c = -1;
}
}
}
}
}
function toLeftKey() {
let c = -1;
for (let i = 0; i < line; i++) {
for (let j = 1; j < line; j++) {
if (numArray[i * line + j] !== undefined) {
for (let k = 0; k < j; k++) {
if (numArray[i * line + j - k - 1] === undefined) {
c = i * line + j - k - 1;
} else {
if (numArray[i * line + j - k - 1] === numArray[i * line + j]) {
numArray[i * line + j - k - 1] += numArray[i * line + j];
numArray[i * line + j] = undefined;
scoreCount(numArray[i * line + j - k - 1]);
c = -1;
break;
} else {
break;
}
}
}
if (c !== -1) {
numArray[c] = numArray[i * line + j];
numArray[i * line + j] = undefined;
c = -1;
}
}
}
}
}
function toRightKey() {
let c = -1;
for (let i = 0; i < line; i++) {
for (let j = line - 2; j > -1; j--) {
if (numArray[i * line + j] !== undefined) {
for (let k = 1; k < line - j; k++) {
if (numArray[i * line + j + k] === undefined) {
c = i * line + j + k;
} else {
if (numArray[i * line + j + k] === numArray[i * line + j]) {
numArray[i * line + j + k] += numArray[i * line + j];
numArray[i * line + j] = undefined;
c = -1;
scoreCount(numArray[i * line + j + k]);
break;
} else {
break;
}
}
}
if (c !== -1) {
numArray[c] = numArray[i * line + j];
numArray[i * line + j] = undefined;
c = -1;
}
}
}
}
}
function rand(arr) {
if (arr.length < 1) {
return false;
}
if (arr.length < 2) {
let arr2 = [...arr];
let c = myRandom(0, arr2.length - 1);
let a = arr2[c];
return [a];
} else {
let arr2 = [...arr];
let c = myRandom(0, arr2.length - 1);
let a = arr2[c];
arr2.splice(c, 1);
c = myRandom(0, arr2.length - 1);
let b = arr2[c];
return [a, b];
}
}
function myRandom(min, max) {
return min + Math.floor((max - min + 1) * Math.random());
}
</script>
</head>
<body>
<div id="info">
<span>0</span>
</div>
<div >
<canvas id="c" width="900" height="900" style="border: 1px solid white;"></canvas>
</div>
<button onclick="reset()"> Another round </button>
<button onclick="newMap()"> New map </button>
<label>
<input id="lineInput" type="number" placeholder=" Please enter the number of lines "/>
</label>
</body>
</html>
边栏推荐
- Oceanbase is the leader in the magic quadrant of China's database in 2021
- Andersen Global通过在芬兰和丹麦的合作协议拓展北欧地区业务版图
- Introduction to ROS from introduction to mastery (zero) tutorial
- A simple deadlock example
- MySQL queries the quantity of each month and the year-on-year and month on month data of each month
- Buuctf babyupload[gxyctf2019]
- Androi weather
- [GXYCTF2019]禁止套娃--详解
- 人神共愤，唐山“群殴女性事件”细节...
- Zhouchuankai, Bank of Tianjin: from 0 to 1, my experience in implementing distributed databases
猜你喜欢
Penetration test summary
Summary of openstack installation problems
. The way to prove the effect of throwing exceptions on performance in. Net core
Using fastjson to solve the problem of returning an empty array from a null value of a field string object
Druid reports an error connection holder is null
Aunt learning code sequel: ability to sling a large number of programmers
Development notes of Mongoose
ROS从入门到精通(零) 教程导读
![[Error] invalid use of incomplete type 使用了未定义的类型](/img/8a/7cb5d270cfd8831ddc146687fe4499.png)
[Error] invalid use of incomplete type 使用了未定义的类型
1. Google grpc framework source code analysis Hello World
随机推荐
Build your own PE manually from winpe of ADK
Using com0com/com2tcp to realize TCP to serial port (win10)
ImportError: cannot import name ＆＃039; get_ ora_ doc＆＃039; from partially initialized module
How many rounds of deep learning training? How many iterations?
[GYCTF2020]Ezsqli --BUUCTF
Arduino interrupt
Kotlin 协程挂起函数 suspend 关键字
Summary of openstack installation problems
市值破万亿，连续三个月销量破10万，比亚迪会成为最强国产品牌？
Daily buckle exercise - conclusion
草在结种子了
Cve-2021-24078 vulnerability analysis
(01). Net Maui actual construction project
Hard (magnetic) disk (II)
深度学习每周期的步数多少合适？
Arduino uses esp8266+ lighting technology + Xiaoai audio to realize voice control switch
In / out / inout details of MySQL stored procedures
Andersen Global通过在芬兰和丹麦的合作协议拓展北欧地区业务版图
[Error] invalid use of incomplete type 使用了未定义的类型
Basic operations of FreeMarker