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. 一次关于js事件出发机制反常的解决记录

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  2. CTF---安全杂项入门第三题 这是捕获的黑客攻击数据包，Administrator用户的密码在此次攻击中泄露了，你能找到吗？

    这是捕获的黑客攻击数据包,Administrator用户的密码在此次攻击中泄露了,你能找到吗?分值:30 来源: 2014sctf 难度:难 参与人数:3918人 Get Flag:384人 答题人数 ...

  3. BZOJ 1411&&Vijos 1544 : [ZJOI2009]硬币游戏【递推，快速幂】

    1411: [ZJOI2009]硬币游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 897  Solved: 394[Submit][Status ...

  4. An Easy Problem?!（细节题，要把所有情况考虑到）

    http://poj.org/problem?id=2826 An Easy Problem?! Time Limit: 1000MS   Memory Limit: 65536K Total Sub ...

  5. div排版+文档流+定位秘诀

    由于没有找到自己认为完整的关于普通流.浮动和绝对定位的中文文章,于是鼓起勇气决定自己来写篇. 在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 ...

  6. 移动App,AJAX异步请求，实现简单的增、删、改、查

    用ajax发异步请求时,要注意url."AppServer"为后台项目名,"LoginServlet.action"为web.xml中的<url-patt ...

  7. javascript 对象-13

    对象 无序属性的集合,属性可以包含基本值.对象或者函数,简单理解为对象是若干属性的集合:我们常说的面向对象(oop)编程其实是指的一种编码的思想,简单理解为用对象来封装数据,利用封装.继承.多态对代码 ...

  8. 浅谈MySQL集群高可用架构

    前言 高可用架构对于互联网服务基本是标配,无论是应用服务还是数据库服务都需要做到高可用.对于一个系统而言,可能包含很多模块,比如前端应用,缓存,数据库,搜索,消息队列等,每个模块都需要做到高可用,才能 ...

  9. oracle 数据库——知识点总结（加示例）

    新入oracle数据库,把目前学到的知识点记录下来,可能都比较基础,但还是比较全的,里面的示例都是自己在PL/SQL中跑过的,如果有错误,还望各位大侠指出哈. 创建用户 1.创建用户(使用管理员身份创 ...

  10. [国嵌攻略][109][Linux系统调用]

    系统调用 函数实现体在内核空间,提供给应用程序来使用,就是一个系统调用. 工作流程 1.通过软中断(swi)从用户空间切换到内核空间.entry-common.S中的ENTRY(vector_swi) ...