1、效果图

2、代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript">

        var maps = new Array(15);

        for (var i = 0; i < 15; i++) {

            maps[i] = new Array(15);

            for (var j = 0; j < 15; j++) {

                maps[i][j] = 0;

            }

        }

        var isBlack= true;

        // 初始化图片

        var black = new Image();

        var white = new Image();

        black.src = "htm5_canvas/img/black.png";

        white.src = "htm5_canvas/img/white.png";

        var can;

        var ctx;

        // 初始化棋盘

        function init() {

            can = document.getElementById("can");

            ctx = can.getContext("2d");

            ctx.strokeStyle = "#FFF";

            for (var i = 0; i < 15; i++) {

                for (var j = 0; j < 15; j++) {

                    ctx.strokeRect(j * 40, i * 40, 40, 40);

                }

            }

        }

        // 下子

        function play(e) {

            var leftOffset = 11;

            var x = e.clientX - leftOffset;

            var y = e.clientY - 11;

            var col = parseInt((e.clientX - 20) / 40) + 1;

            var row = parseInt((e.clientY - 20) / 40) + 1;

            if (isBlack) {

                ctx.drawImage(black, col * 40 - 20, row * 40 - 20);

                isBlack = false;

            }

            else {

                ctx.drawImage(white, col * 40 - 20, row * 40 - 20);

                isBlack = true

            }

        }

    </script>

</head>

<body onload="init();">

        <canvas id="can" width="600" height="600" onclick="play(event);" style="background:url(htm5_canvas/img/bak.jpg)"></canvas>

</body>

</html>

3、总结用到的知识点Canvas

Html5五子棋的更多相关文章

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. HTML5 五子棋 - JS/Canvas 游戏

    背景介绍 因为之前用c#的winform中的gdi+,java图形包做过五子棋,所以做这个逻辑思路也就驾轻就熟,然而最近想温故html5的canvas绘图功能(公司一般不用这些),所以做了个五子棋,当 ...

  3. 7款值得你心动的HTML5动画和游戏

    1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示 ...

  4. 经典的HTML5游戏及其源码分析

    HTML5已经相当强大,在HTML5平台上,我们可以完成很多非常复杂的动画效果,包括游戏在内.早期我们只能利用flash来实现网络游戏,现在我们又多了一种选择,即用HTML5制作游戏.相比flash, ...

  5. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  6. js+html5双人五子棋(源码下载)

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈

    前言     本文主要介绍利用开源引擎 lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程. 游戏规则 玩过五子棋的都应该知道五子棋的规则,这里就简单介绍其规则. 1 ...

  8. html5 canvas 五子棋游戏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. HTML5游戏，五子棋

    在线演示 本地下载 最近html5的游戏还真是不少,这种在线游戏既简单又有趣.收藏几个在午休时间娱乐一下.何乐而不为呢?喜欢研究的可以下载代码看看.超级推荐!

随机推荐

  1. PHP使用文件流下载文件方法（附：解决下载文件内容乱码问题）

    1.flush - 刷新输出缓冲 2.ob_clean - 清空(擦掉)输出缓冲区 此函数用来丢弃输出缓冲区中的内容. 此函数不会销毁输出缓冲区,而像 ob_end_clean() 函数会销毁输出缓冲 ...

  2. Android开发艺术探究Note

    第一章:Activity的生命周期和启动模式 生命周期 onPause表示activity正在停止,onPaus必须先执行完(栈顶的activity),新的activity的onResume才会执行. ...

  3. bean的作用域 ：singleton和prototype

  4. vue引入新版 vue-awesome-swiper填坑

    关于新版 vue-awesome-swiper 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播 ...

  5. 用adb命令查看apk版本

    adb devices  (显示连接的设备) adb root   (获取手机root权限) adb remount  (重新挂载系统分区,使系统分区重新可写) adb shell (进入目标设备的L ...

  6. linux下yum命令出现Loaded plugins: fastestmirror

    yum install的时候提示:Loaded plugins: fastestmirror fastestmirror是yum的一个加速插件,这里是插件提示信息是插件不能用了. 不能用就先别用呗,禁 ...

  7. 修真院java后端工程师学习课程--任务1(day one)

    这是我从学习资料-线下报名-北京报名截取的报名截图,从图中我们可以看出我们的报名对象应该有姓名,qq,修真类型,预计入学时间,毕业院校,线上学号,日报链接,立愿,辅导师兄等属性,其中线上学号是主码. ...

  8. PostgresSQL中的限制和级联删除

    摘录自:http://www.mamicode.com/info-detail-879792.html 删除和更新时对应的操作是一样的

  9. Vue.js学习网址

    Vue官网:http://cn.vuejs.org/v2/guide/index.html 淘宝镜像:http://npm.taobao.org/ Vue-router:https://router. ...

  10. python环境搭建--pycharm的安装及使用

    学习网址: --菜鸟教程(2.0和3.0) http://www.runoob.com/python/python-tutorial.html http://www.runoob.com/python ...