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 类知识点总结
python 类知识点总结 面向对象思想: 1.设计的时候,一定要明确应用场景 2.由对象分析定义类的时候,找不到共同特征和技能不用强求 1.简述类.对象.实例化.实例这些名词的含义: 类:从一组对象 ...
- Oracle：如何使用PL/SQL 11.0连接远程Oracle12c服务器？
背景: 如何实现远程连接服务器上的oracle12c? 1.安装一个oracle12c空库,使用oracle12c中集成的oracle pl/sql developer工具实现连接远程服务器上的ora ...
- [翻译] Tensorflow模型的保存与恢复
翻译自:http://cv-tricks.com/tensorflow-tutorial/save-restore-tensorflow-models-quick-complete-tutorial/ ...
- 从零开始搭建springboot+mybatis+thymeleaf增删改查示例
环境说明: 开发工具:Eclipse Mars.2 Release(4.5.2) JDK:1.8 Maven:3.3.3 注:Eclipse需安装sts插件,安装方法请自行百度 1. 新建maven工 ...
- List<E> 接口简明
java.util.List<E>接口. ListIterator.equals 方法 List 是 Collection 接口的子接口,具备了 Collection 的所有方法. Lis ...
- 物联网 MQTT 服务质量级别
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 翻译人:Tnecesoc,该成员来自云+社区翻译社 消息队列遥测传输(MQTT)是一种客户端服务器发布 / 订阅消息传输协议.它轻量,开放, ...
- mysql如何选择合适的数据类型1：CHAR与VARCHAR
CHAR和VARCHAR类型类似,都用来存储字符串,但它们"保存"和"检索"的方式不同.CHAR属于"固定长度"的字符串,而VARCHAR属 ...
- Angular CLI 安装
安装Angular 官网的教程,因为国内网络环境原因,访问不了服务器,导致安装失败. 1.先安装NodeJs 安装教程:http://blog.csdn.net/zengmingen/article/ ...
- js 函数 作用域 全局作用域 局部作用域 闭包
一个变量没有声明但调用 直接报错,声明没有赋值会显示未定义. 作用域 作用域(scope):一条数据可以在哪个范围中使用. 通常来说,一段程序代码中所用到的数据并不总是有效/可用的,而限定这个数据的可 ...
- HashMap 你真的了解吗？
HashMap深入解析及详细介绍 一. hashmap简介 HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特 ...