HTML/Javascript Scrabbling Snakes Game Email Tutorial

HTML/Javascript Scrabbling Snakes Game Email Tutorial

HTML/Javascript Scrabbling Snakes Game Email Tutorial

Scrabbling Snakes, as we explained yesterday with HTML/Javascript Scrabbling Snakes Game Primer Tutorial as shown below, is a hybrid game combining the Scrabble board with styling to look a bit like snakes (well, you had to be there) and with a word scramble game feel. It could do well as a vocabulary improvement game for an ESL student, as the dictionary used is in English, using the web server’s wordlist arrangements.

It’s a funny thing with programming that refinements often take longer to do than the original “crux” of the program, and it often feels like this for me perhaps, because am so keen to get that “crux” settled as quickly as possible, else you can lose impetus. Another funny thing is how little time you spend on mathematical endeavours. It seems counter-intuitive, but most of the time is spent organizing to get to some of that pure mathematical work, and by the time you get there, the thing you’ve been aiming for … the actual thing … can be done very quickly. This, of course, is just a subjective observation … for example, there’ll be some programmers who never touch the code until they know they can spend more time at the proper endeavours. Each approaches has its merits and its fallbacks.

“Collaboration” work with game programs has a parallel “feel” for me, in that it seems to take more time than the “crux” of the program. Generally speaking input/output work does, as it (usually) introduces second and third parties and interfacing to other systems … and the part Y part (it comes after part X).

Being such a fan of email, still think in terms of it as far as “collaboration” on a game is concerned, but if you are into mobile technology or if you breathe (remember to breathe), you’ll be thinking of so much more perhaps … SMS, video, chat, podcast, social media, the cloud (in that generic sense) … or the other way, sending a letter via snail mail … people communicate in lots of different ways.

It wasn’t just some form of collaboration we thought about in “round two” … where we had “Bugs” reeling against the ropes and down for a count of 4 … not 8 … eternal vigilance … anyway we addressed …

  1. “collaboration” (ie. being able to share a snapshot of the game with someone else) via email (via the mailto link … and it would be useful to read up on Javascript encodeURIComponent and decodeURIComponent)
  2. add in concept of a Player (or user) … and with this game it makes sense to allow as many as you like (less than 15×15 … we don’t code for that)
  3. adjust the concept of Score and Goes to Scores and Goesies (Moses supposes his goesies are rosies but Moses supposes erroneously)
  4. weight the letter choice on the grid (inversely) reflecting more what Scrabble uses as a value of that letter … in other words, among the pool of letter choices we’ll have only one Q or Z (worth 10 (in Scrabble) each) but have, in that same pool, 10 (ie. 10 – 1 + 1) of any letters with a Scrabble value of 1 (like all the vowels for example) … so that the grid ends up with more accessible chances to form words

Now the HTML and Javascript code looks like word_jumble.html (which supervises (the unchanged) PHP word_jumble.php to validate the words) and changed from yesterday’s “crux” code as per word_jumble.html.

Have fun playing (and hopefully collaborating) with this word game, today, with our live run (or watch a slideshow).

Stop Press

We’ve been relooking at some ESL web applications like “Scrabbling Snakes” here late in February 2016 because the advent of our supervisory PHP Themed Supervision Sixth Genericization Tutorial threw up into focus “a trap for young players” perhaps. In “Scrabbling Snakes” we use document.title as a shared “resource” for (this new changed) word_jumble.html to be able to “talk” with the (unchanged) word_jumble.php regarding whether the PHP validates a word, or not. However, the way PHP Themed Supervision Sixth Genericization Tutorial works is that web applications like “Scrabbling Snakes” are “encased” in an HTML iframe element and so when the PHP mentions top.document.title in its thinking, that no longer corresponds to the document.title thinking that the old HTML was full of, and so it was amended so that all its document.title references are now, instead, mapped to top.document.title so that the HTML and PHP can resume their Fred and Ginger arrangements, even when its stormy?!


Previous relevant HTML/Javascript Scrabbling Snakes Game Primer Tutorial is shown below.

HTML/Javascript Scrabbling Snakes Game Primer Tutorial

HTML/Javascript Scrabbling Snakes Game Primer Tutorial

Scrabbling Snakes is a hybrid game combining the Scrabble board with styling to look a bit like snakes (well, you had to be there) and with a word scramble game feel. It could do well as a vocabulary improvement game for an ESL student, as the dictionary used is in English, using the web server’s wordlist arrangements.

Am sure if you are interested how we created this game you would not have too much trouble seeing what we did by examining the HTML and Javascript code you could call word_jumble.html (which supervises PHP word_jumble.php to validate the words).

Scrabbling Snakes consists of a grid (ours is 15×15 like Scrabble uses) of letters (from a to z) not repeated horizontally nor vertically within that grid, if that is possible.

The grid tiles show the letters with a sub tag showing the letter score value, and we have Scrabble background tile colours as in …

  • Red triple word score
  • Pink double word score
  • Blue triple letter score
  • Light blue double letter score

Hope you get some HTML and Javascript ideas about games, and have fun playing this word game, today, with our live run.

… and the tile text colour is Black before (double) clicking, before turning Orange on a successfully registered (double) click.

So words can be three or more characters … no plurals, no proper nouns, no apostrophies or non alpha characters.

There is no surprise with the HTML “grid” being composed of an HTML table element.

Hope you get some HTML and Javascript ideas about games, and have fun playing this word game, today, with our live run.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, ESL, Games, Tutorials and tagged , , , , , , , , , , , , , , , . Bookmark the permalink.

55 Responses to HTML/Javascript Scrabbling Snakes Game Email Tutorial

  1. Wonderful article! We will be linking to this great post on our website.

    Keep up the good writing.

  2. I absolutely love your blog and find almost all of your post’s to be what precisely I’m looking for.
    Would you offer guest writers to write content for you?

    I wouldn’t mind publishing a post or elaborating on some
    of the subjects you write regarding here. Again, awesome web
    site!

  3. Thanks for a marvelous posting! I quite enjoyed
    reading it, you can be a great author. I will be sure to bookmark your blog and will often come back later on. I want to encourage you
    to definitely continue your great job, have a nice morning!

  4. Alpha Shred says:

    I’d like to find out more? I’d love to find out some additional information.

  5. Very shortly this site will be famous amid all blogging people, due to it’s good posts

  6. Hello! I could have sworn I’ve visited your blog before
    but after looking at a few of the articles I realized it’s new to me.

    Nonetheless, I’m certainly delighted I came across it and I’ll be bookmarking it and checking back often!

  7. iglobal.co says:

    Good post. I learn something new and challenging on websites I stumbleupon everyday.
    It will always be helpful to read through articles from other writers and use something from
    other sites.

  8. May I simply just say what a relief to uncover someone that truly knows what they
    are discussing online. You definitely realize how to bring an issue to
    light and make it important. More people must check this out and understand this side of your story.
    I can’t believe you’re not more popular given that you
    most certainly have the gift.

  9. Network marketing companies like Zam – Zuu, choose to
    spend very little, if any, on advertising
    in the traditional sense. Harvey Leibenstein (1922-1994) consider entrepreneur as gap-fillers.

    TheseΒ machinesΒ areΒ perfectlyΒ capableΒ ofΒ offeringΒ fourΒ selections.

  10. Kacey says:

    Gracias mil esta pΓ‘gina es un flipada.

  11. What’s up, I read your new stuff daily. Your humoristic style
    is witty, keep up the good work!

  12. I have read so many articles about the blogger lovers however this paragraph
    is genuinely a pleasant article, keep it up.

  13. Miriam says:

    Members can make money by viewing advertisements, by promoting
    their referral link and getting direct referrals, by renting
    referrals and by participating in various paid actions initiated by Imperial –
    Get – Cash. are free to use and bring a lot of traffic, if
    your posts become popular of course. How to use expired domains to skyrocket your traffic.

  14. Fantastic post however I was wanting to know
    if you could write a litte more on this subject?

    I’d be very grateful if you could elaborate a little bit more.

    Bless you!

  15. That is a good tip especially to those new to the
    blogosphere. Brief but very accurate information… Many thanks for sharing this one.
    A must read post!

  16. Hope you’re well, I enjoyed the read! Keep up the good work!

    :)

  17. drukarnie says:

    Hi, all is going fine here and ofcourse every one is sharing information, that’s actually good,
    keep up writing.

  18. I believe this is one of the such a lot important info for me.
    And i am happy studying your article. However should commentary on few basic issues, The
    web site taste is ideal, the articles is actually nice : D.
    Just right job, cheers

  19. Hey there! I could have sworn I’ve been to this website before
    but after checking through some of the post I realized it’s
    new to me. Nonetheless, I’m definitely delighted I found it and I’ll be bookmarking and checking back frequently!

  20. tourism says:

    Wow, that’s what I was searching for, what a information! existing here at this blog, thanks
    admin of this website.

  21. Jewell says:

    Good day I am so excited I found your site, I really found you by
    error, while I was searching on Bing for something else, Anyhow I am here now and would just like to say thanks for a remarkable post and a all round enjoyable blog
    (I also love the theme/design), I don’t have time to read through it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read a great
    deal more, Please do keep up the excellent work.

  22. Great post , I am going to spend more time researching this topic

  23. BBs says:

    I visited many website Һowever the audio quality for audio
    songs existing аt tҺіѕ site іѕ ɑctually superb.

    Μʏ web site: BBs

  24. Great tremendous things here. I am very satisfied to peer your post. Thanks so much and i am looking forward to touch you. Will you please drop me a mail?

  25. I just couldn’t depart your website before suggesting that I actually enjoyed the standard info a person supply for your guests? Is going to be back incessantly to investigate cross-check new posts

  26. Pickup says:

    Wonderful site. Plenty of useful info here. I am sending it to several buddies ans additionally sharing in delicious. And naturally, thank you for your effort!

  27. whoah this weblog is magnificent i like reading your posts. Keep up the great paintings! You realize, lots of persons are searching round for this information, you could help them greatly.

  28. Just want to say your article is as amazing. The clarity in your post is simply spectacular and i could assume you’re an expert on this subject. Fine with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please continue the rewarding work.

  29. Dr. Grossman says:

    I like the valuable information you offer within your articles. IÒ€ℒll bookmark your weblog and check once more here regularly. IÒ€ℒm quite certain IÒ€ℒll learn numerous new stuff right here! Excellent luck for the next!

  30. design ideas says:

    subjects and share it with us. I think it will certainly help a lot of some people. Many thanks

  31. Unquestionably believe that which you stated. Your favorite reason seemed to be on the internet the easiest thing to be aware of. I say to you, I certainly get irked while people think about worries that they just do not know about. You managed to hit the nail upon the top and defined out the whole thing without having side-effects , people could take a signal. Will probably be back to get more. Thanks

  32. Good day very nice site!! Man .. Excellent .. Superb .. I will bookmark your website and take the feeds additionallyΒ‘KI’m glad to find numerous helpful info here within the put up, we need work out more techniques on this regard, thank you for sharing. . . . . .

  33. Automobile says:

    Thank you, I have recently been searching for information about this subject for a while and yours is the best I have came upon so far. However, what in regards to the bottom line? Are you certain in regards to the source?

  34. Healthy Life says:

    It‘¦s in point of fact a nice and useful piece of info. I am happy that you just shared this helpful info with us. Please stay us informed like this. Thank you for sharing.

  35. Healthy Life says:

    Thanks a lot for providing individuals with such a breathtaking possiblity to read articles and blog posts from this web site. It can be very great and as well , stuffed with a lot of fun for me and my office friends to search the blog the equivalent of 3 times every week to study the newest things you have got. And of course, I am also always impressed concerning the cool knowledge you serve. Some 2 tips in this post are clearly the most efficient I have ever had.

  36. I agree with you. I wish I had your passion for writing!

  37. Heya i’m for the first time here. I found this board and I in finding It really useful & it helped me out a lot. I hope to offer one thing again and aid others such as you helped me.|

  38. Car says:

    It‘¦s actually a cool and useful piece of info. I‘¦m glad that you shared this useful info with us. Please keep us informed like this. Thank you for sharing.

  39. It is in reality a nice and useful piece of info. I‘¦m happy that you just shared this helpful info with us. Please stay us informed like this. Thanks for sharing.

  40. I see something really interesting about your blog so I saved to favorites .

  41. ozwool says:

    Nice post. I was checking continuously this weblog and
    I am inspired! Very helpful information specifically the ultimate part :) I maintain such information a lot.
    I was seeking this certain information for a long time.

    Thank you and good luck.

  42. I do believe all the concepts you have presented for your post. They’re really convincing and will definitely work. Still, the posts are too quick for starters. Could you please lengthen them a bit from next time? Thank you for the post.

  43. Good write-up, I‘¦m regular visitor of one‘¦s website, maintain up the excellent operate, and It is going to be a regular visitor for a long time.

  44. This is my first time pay a quick visit at here and i am truly pleassant
    to read everthing at single place.

  45. Junior says:

    I have actually become aware of blog sites and also kind of know what they are. My question is what do you compose on a blog site, like things thats on your mind or just whatever? And also what internet sites can i logon to to start blog sites?.

  46. Because the admin of this site is working, no doubt very quickly
    it will be well-known, due to its quality
    contents.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>