JS实现2048代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cwl's 2048</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #5ad9ff;
}
</style>
</head>
<body>
<script> function canvas_node() {
/**
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50); ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill(); */
} function rand_num(l,r) {
l = Math.min(l,r);
r = Math.max(l,r);
return Math.floor(Math.random()*(r-l+1)+l);
} function draw_num(num,x,y,x0,y0) {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "black";
ctx.font = "30px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle"
ctx.fillText(num.toString(),x0+x*100+40,y0+y*100+40,100);
} function show_map(arr) {
var ctx = document.getElementById('canvas').getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
var x0 = width/2 - 200;
var y0 = window.innerHeight/5;
ctx.fillStyle = "#8ece44";
ctx.fillRect(x0-25,y0-25,430,430);
ctx.fillStyle = "#ffe945";
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
ctx.fillRect(x0+i*100,y0+j*100,80,80);
}
}
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
if(arr[i][j]!=0) {
draw_num(arr[i][j],i,j,x0,y0);
}
}
}
} function init_game() {
var arr = new Array(4);
for(var i = 0; i < 4; i ++ ) {
arr[i] = new Array(4);
}
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
arr[i][j] = 0;
}
}
new_num(arr);
new_num(arr);
show_map(arr);
return arr;
} function new_num(arr) {
var ok = 0;
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
if(!arr[i][j]) {
ok = 1;
}
}
if(ok) {
break;
}
}
while(ok) {
var x = rand_num(0,3);
var y = rand_num(0,3);
var t = rand_num(1,2);
if(arr[x][y] == 0) {
arr[x][y] = t*2;
break;
}
}
} function is_end(arr) {
var xx = [-1, 1, 0, 0];
var yy = [ 0, 0,-1, 1];
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
if(arr[i][j] == 0) {
return false;
}
else {
for(var k = 0; k < 4; k ++ ) {
var next_x = i + xx[k];
var next_y = j + yy[k];
if(is_in(next_x,next_y) && arr[next_x][next_y] == arr[i][j]) {
return false;
}
}
}
}
}
return true;
} function is_in(x,y) {
return x >= 0 && y >= 0 && x < 4 && y < 4;
} function join(arr,dir,x,y) {
var xx = [-1, 1, 0, 0];
var yy = [ 0, 0,-1, 1];
var flag = 0;//判断是否能继续合并
while(is_in(x,y)) {
var next_x = x+xx[dir];
var next_y = y+yy[dir];
if(!is_in(next_x,next_y)) {
break;
}
if(arr[next_x][next_y] == 0) {
arr[next_x][next_y] = arr[x][y];
arr[x][y] = 0;
}
else if(arr[next_x][next_y] == arr[x][y] && !flag) {
arr[next_x][next_y] *= 2;
arr[x][y] = 0;
flag = 1;
}
else break;
x = next_x;
y = next_y;
} } function change(arr,dir) {
if(dir == 2) { // up
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
join(arr,dir,i,j);
}
}
}
else if(dir == 3) { //down
for(var i = 0; i < 4; i ++ ) {
for(var j = 3; j >= 0; j -- ) {
join(arr,dir,i,j);
}
}
}
else if(dir == 0) {
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
join(arr,dir,i,j);
}
}
}
else if(dir == 1) {
for(var i = 3; i >= 0; i -- ) {
for(var j = 0; j < 4; j ++ ) {
join(arr,dir,i,j);
}
}
}
//console.log(arr);
if(is_end(arr)) {
alert("end");
return 1;
}
new_num(arr);
show_map(arr);
return 0;
} function main() {
document.body.style.overflow="hidden";
var can = document.createElement('canvas');
can.id = "canvas";
can.width = window.innerWidth;
can.height = window.innerHeight;
document.body.appendChild(can);
var arr = init_game(); var keyIsDown = 0; window.addEventListener('mousemove', function(event) {
console.log(event)
}) window.addEventListener('keydown',function(event){
var key = event.keyCode;
var ret = 0;
if(keyIsDown == 0) {
keyIsDown = 1;
if(key == 38) {//up
ret = change(arr,2);
}
else if(key == 40) {//down
ret = change(arr,3);
}
else if(key == 37) {//left
ret = change(arr,0);
}
else if(key == 39) {//right
ret = change(arr,1);
}
if(ret) {
arr = init_game();
show_map(arr);
}
}
}) window.addEventListener('keyup',function(){
keyIsDown = 0;
}) window.onresize = function()
{
var can = document.getElementById("canvas");
var height = window.innerHeight;
var width = window.innerWidth;
can.height = height;
can.width = width;
show_map(arr);
}
}
main();
</script>
</body>
</html>
2048
JS实现2048代码的更多相关文章
- 使用JS实现2048小游戏
JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...
- JS Nice – JavaScript 代码美化和格式化工具
JS Nice 是一款让经过混淆处理的 JavaScript 代码可读更好的工具.它使用一种新型的用于 JavaScript 代码美化的去混淆和去压缩引擎.JSNice 采用先进的机器学习和程序分析技 ...
- ios-UIWebView中js和oc代码的互调
webview是ios中显示远程数据的网页控件,webview能显示的内容很多,MP4.文本.pdf等等: 关于js和oc代码的互相调用 1:oc中调用js代码; >>oc中调用js代码很 ...
- 关于JS的一些代码效果图
关于JS的一些代码效果图 1.几乎所有DOM元素都有innerText.innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的. 需要注意的是 ...
- js基础 - 兼容代码
js基础 - 兼容代码 . scrollTop . chrome document.body.scrollTop . IE && firefox document.documentEl ...
- [转]Asp.Net调用前台js调用后台代码分享
1.C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> ...
- JS软键盘代码
页面代码如下: <HTML> <HEAD> <TITLE>一个不错的js软键盘代码</TITLE> <meta http-equiv=" ...
- 用js实现2048小游戏
用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...
- asp.net调用前台js调用后台代码分享
asp.net调用前台js调用后台代码分享 C#前台js调用后台代码前台js<script type="text/javascript" language="jav ...
随机推荐
- python中两种方法实现二分法查找，细致分析二分法查找算法
之前分析了好多排序算法,可难理解了呢!!(泣不成声)这次我要把二分查找总结一下,这个算法不算难度特别大,欢迎大家参考借鉴我不喜欢太官方的定义,太晦涩的语言,让人看了就头晕.我希望加入我自己的理解,能帮 ...
- FPGA与MATLAB数据交互高效率验证算法——仿真阶段
之前博文是对基本设计技巧的总结和一些小设计随笔,内容有点杂,缺乏目的性.本来后续计划设计几个小项目,但导师的任务比较紧,所以为了提高效率,后续博客会涉及到很多算法方面的设计与验证的内容,主要关于OFD ...
- html标记语言 --文本标记
html标记语言 --文本标记 二.文本标记 1.h1-h6 标题标记,h1最大 2.font 字体设置标记 2.1 size字体大小.<font size="> 取值范围1-7 ...
- Text-文本撤销
#撤销操作 from tkinter import * master = Tk() #打开undo按钮 text=Text(master,width=30,height=5,undo=True) te ...
- 关于python 使用腾讯云OCR 通用印刷体识别
腾讯的python SDK没有通用印刷体识别,所以参考了别人识别网上图片的方式:https://www.cnblogs.com/semishigure/p/7690789.html 但是咱们使用的基本 ...
- .NET Core 从 Github到 Nuget 持续集成、部署
一.前言 Nuget 作为一个.NET研发人员,我想你都不会陌生,他为我们提供非常方便的程序包管理,不管是版本,还是包的依赖都能轻松应对,可以说是我们的好助手.而 Nuget 除了官方nuget.or ...
- jQuery中的for循环var与let的区别
今天在写jQuery请求接口中发现一个问题: 在用AJAX发送请求中又嵌套了一个AJAX请求,发现在内层请求的success中对第一次success中的循环变量 i 无法获取,具体代码如下: $.aj ...
- pyqt5 动画学习（一） 改变控件大小
入坑pyqt也有半年了,由于人们对事物的审美,静态界面已经不能满足用户,而动画却给人眼前一亮,so,今天来学习pyqt的动画了 由于资料真的是太少,本人也是有啃外国佬的英文进行摸索学习,可能也是触及皮 ...
- python打造一个Mysql数字类型注入脚本(1)
前言: 总是想写一个sql注入脚本,但是之前的那些都不行. 这次做好了准备,然后嘿嘿嘿. 准备: sql注入的基础知识 熟悉怎么判断 正文: 思路概念图: 这里我没有限制用户输入,不限制的话可能会 @ ...
- Git的安装和使用（托管至GitHub的方法）
一.下载Git 1.下载 下载地址: https://git-scm.com/download/win 根据你的操作系统选择32位或者64位 2.安装过程一路next 3.检验安装是否成功 在桌面点击 ...