当前位置：网站首页>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>
边栏推荐
- @Disallowcurrentexecution prevents quartz scheduled tasks from executing in parallel
- 硬（磁）盘（二）
- What is pytorch? Explain the basic concepts of pytorch
- 单片机串口中断以及消息收发处理——对接受信息进行判断实现控制
- 草在结种子了
- [virtual machine] notes on virtual machine environment problems
- 天津银行周传凯：从 0 到 1，我的分布式数据库落地经验谈
- Arduino controls tb6600 driver +42 stepper motor
- ImportError: cannot import name ＆＃039; get_ ora_ doc＆＃039; from partially initialized module
- 市值破万亿，连续三个月销量破10万，比亚迪会成为最强国产品牌？
猜你喜欢
ROS从入门到精通(零) 教程导读
什么是 Meebits？一个简短的解释
Today's sleep quality record 74 points
Some basic design knowledge
People and gods are angry. Details of Tangshan "mass beating of women incident"
Penetration test summary
ROS2之OpenCV人脸识别foxy~galactic~humble
Summary of openstack installation problems
Build your own PE manually from winpe of ADK
Using com0com/com2tcp to realize TCP to serial port (win10)
随机推荐
Buuctf babyupload[gxyctf2019]
Androi天气
Solution to the problem of closing the watchdog of STM32 in the sleep mode (stop/standby)
ImportError: cannot import name ＆＃039; get_ ora_ doc＆＃039; from partially initialized module
Through MDC, you can easily track your scheduled task log
Mongodb array operation
Some basic design knowledge
ROS从入门到精通(零) 教程导读
Development notes of Mongoose
(01).NET MAUI实战 建项目
Arduino interrupt
[ciscn2019 North China Day2 web1]hack world --buuctf
通过抓包下载钉钉直播回放
. The way to prove the effect of throwing exceptions on performance in. Net core
Biological unlocking - Fingerprint entry process
也许尘埃落地，我们才能想清楚互联网的本质
MySQL locates the position of the character in the string String substitution
[GYCTF2020]Ezsqli --BUUCTF
Andersen Global通过在芬兰和丹麦的合作协议拓展北欧地区业务版图
Oceanbase is the leader in the magic quadrant of China's database in 2021