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 ...
随机推荐
- win7远程桌面 连接不上（用户名与全名不匹配的问题）
用户名与用户全名不一致导致的.我刚也是这个问题,折腾够了好久.你先看看 计算机右键→管理→本地用户和组→用户 找到你需要远程的管理员账户,看看名称与全名是否一致,若不一致,继续看下面.1.按" ...
- zoj 3981 Balloon Robot
https://vjudge.net/problem/ZOJ-3981 题意: 有m个座位,其中n个队伍坐在这些位置上,一个队伍一个座位.当一个队A了题之后,他们们会得到气球,假设他们在a时刻A题,但 ...
- 使用net.sf.cssbox实现网页截图
需要引用包,在pom.xml中添加引用: <dependency> <groupId>net.sf.cssbox</groupId> <artifactId& ...
- SQL基础----DCL
在之前的文章已经讲到SQL基础DDL(数据库定义语句 http://www.cnblogs.com/cxq0017/p/6433938.html)和 DML(数据库操作语句 http://www.cn ...
- 学习React系列（九）——高阶函数
定义:高阶组件就是一个函数,且该函数接收一个组件作为参数,并返回一个新的组件. (上一篇已经说过了高阶组件可以用来解决交叉问题) 一.不要改变原始组件,使用组合 class A extends Rea ...
- glut 深度测试无不起作用问题解决
OpenGL中使用glEnable(GL_DEPTH_TEST)后深度测试没有起作用,发现深度缓冲没有创建.glut库在兼容模式(GL_COMPATIBILITY_PROFILE)下displaymo ...
- 分布式版本管理工具 git常用命令
Git global setup git config --global user.name "joey" git config --global user.email " ...
- 将 Net 项目升级 Core项目经验：（二）修复迁移后Net Standard项目中的错误
修复迁移后Net Standard项目中的错误 接上一章,项目编译结果如下: 解决依赖dll引用 在Net Framework项目的引用如下: 各引用和作用: log4net(1.10.0.0) 用于 ...
- 微信的自动回复&接入聊天机器人
今天偶尔发现了一个有趣的python库--itchat,可以实现微信的自动回复.防撤回,结合图灵机器人还能实现聊天机器人的作用 简单介绍一下配置与工具 win7旗舰版 pycharm python ...
- javascript的基础(1)
1.javascript是什么? 它是一门基于客户端的脚本语言,是相对于服务器而言,浏览器就是一个客户端软件,浏览器从服务器上将资源(html,css,js,图片等)请求下来 并且在本地利用浏览器去解 ...